@import "tailwindcss";
@source inline("text-red-{50,{100..900..100},950}");
@source inline("text-orange-{50,{100..900..100},950}");
@source inline("text-amber-{50,{100..900..100},950}");
@source inline("text-yellow-{50,{100..900..100},950}");
@source inline("text-lime-{50,{100..900..100},950}");
@source inline("text-green-{50,{100..900..100},950}");
@source inline("text-emerald-{50,{100..900..100},950}");
@source inline("text-teal-{50,{100..900..100},950}");
@source inline("text-cyan-{50,{100..900..100},950}");
@source inline("text-sky-{50,{100..900..100},950}");
@source inline("text-blue-{50,{100..900..100},950}");
@source inline("text-indigo-{50,{100..900..100},950}");
@source inline("text-violet-{50,{100..900..100},950}");
@source inline("text-purple-{50,{100..900..100},950}");
@source inline("text-fuchsia-{50,{100..900..100},950}");
@source inline("text-pink-{50,{100..900..100},950}");
@source inline("text-rose-{50,{100..900..100},950}");
@source inline("text-slate-{50,{100..900..100},950}");
@source inline("text-gray-{50,{100..900..100},950}");
@source inline("text-zinc-{50,{100..900..100},950}");
@source inline("text-neutral-{50,{100..900..100},950}");
@source inline("text-stone-{50,{100..900..100},950}");

/* Tailwind CSS v4 不再需要 @tailwind 指令 */
/* 自定义样式 */
.sidebar-item {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.sidebar-item:hover {
  background-color: rgb(243 244 246);
}

.sidebar-item.active {
  background-color: rgb(240 253 244);
  color: rgb(22 163 74);
}

.note-item {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom-width: 1px;
  border-color: rgb(243 244 246);
  cursor: pointer;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.note-item:hover {
  background-color: rgb(249 250 251);
}

.note-item.active {
  background-color: rgb(239 246 255);
  border-left-width: 4px;
  border-left-color: rgb(34 197 94);
}

.editor-toolbar-button {
  padding: 0.5rem;
  border-radius: 0.375rem;
}

.editor-toolbar-button:hover {
  background-color: rgb(243 244 246);
}

.note-content-editable {
  min-height: 400px;
  outline: none;
}

.note-content-editable:focus {
  outline: none;
}

/* 自定义类用于文本截断 */
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* TipTap 编辑器工具栏样式优化 */
.tiptap-toolbar {
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
  padding: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.toolbar-section {
  display: flex;
  align-items: center;
}

/* 确保工具栏按钮组正确显示 */
.el-button-group {
  display: flex !important;
}

/* 编辑器内容区域优化 */
.tiptap-editor {
  padding: 1.5rem;
  min-height: 500px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tiptap-toolbar {
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .toolbar-section {
    margin-bottom: 0.25rem;
  }
}
